<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://www.codecoord.com" %>
<!DOCTYPE html>
<html lang="en" class="fly-html-layui fly-html-store">
<head>
          <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
     <meta name="renderer" content="webkit">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <link rel="stylesheet" href="${APP_PATH}/statics/front/layui/dist/css/layui.css">
     <link rel="stylesheet" href="${APP_PATH}/statics/front/css/global.css" charset="utf-8">
     <link rel="stylesheet" href="${APP_PATH}/statics/front/css/global(1).css" charset="utf-8">
     <link rel="stylesheet" href="${APP_PATH}/statics/front/css/store.css" charset="utf-8">
     <link rel="icon" href="${APP_PATH}/statics/front/images/favicon.ico">
     <title>shop商城</title>
<body>
<!-- 顶部start -->
<div class="layui-header header header-store" style="background-color: #393D49;">
     <div class="layui-container">
          <a class="logo" href="index.html">
               <img src="${APP_PATH}/statics/front/images/logo.png" alt="layui">
          </a>
          <div class="layui-form component" lay-filter="LAY-site-header-component"></div>
          <ul class="layui-nav" id="layui-nav-userinfo">
               <li data-id="index" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                            href="/index.html">首页</a></li>
               <li data-id="room" class="layui-nav-item layui-hide-xs"><a class="fly-case-active"
                                                                          data-type="toTopNav"
                                                                          href="/items/list.html">商品类型</a></li>
               <li data-id="register" class="layui-nav-item layui-hide-xs layui-this"><a class="fly-case-active" data-type="toTopNav"
                                                                               href="/notice.html">商城公告</a></li>
               <li data-id="login" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                                      href="/login.jsp">登入</a></li>
               <li data-id="register" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                               href="/register.jsp">注册</a></li>
               <li data-id="register" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                               href="/user/toUser.html">个人中心</a></li>
               <span class="layui-nav-bar" style="left: 560px; top: 55px; width: 0px; opacity: 0;"></span></ul>
     </div>
</div>
<!-- 顶部end -->

<!-- 中间区域开始 -->
<!-- 搜索框start -->
<div class="shop-nav shop-index">
     <!--搜索 start-->
     <div id="LAY-topbar" style="height: auto;">
          <div class="input-search">
               <div id="searchItems">
                    <input type="text" placeholder="搜索你需要的商品" name="productName" id="productNameId"
                           autocomplete="off" value="">
                    <button class="layui-btn layui-btn-shop" style="background-color: #009688">
                         <i class="layui-icon layui-icon-search"></i>
                    </button>
               </div>
               <div class="layui-container layui-hide-xs"><a href="#" class="topbar-logo">
                    <img src="${APP_PATH}/statics/front/images/logo-1.png" alt="layui"> </a></div>
          </div>
     </div>
     <!--搜索 end-->
</div>
<!-- 搜索框end -->

<!-- 类型列表start -->
<div class="shop-temp shoplist">
     <div class="temp-normal">
          <div class="layui-container">
               <div class="layui-row layui-col-space20 shoplist" id="roomList">
                    <c:forEach var="items" items="${itemsList}">
                         <div data-id="${items.id}" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
                              <a class="template store-list-box fly-case-active" href="/items/${items.id}.html" data-type="toRoomInfo">
                                   <img src="/shop/show/${items.photo}" class="store-list-cover">
                                   <h2 class="layui-elip">${items.typeName}</h2>
                                   <div>
                                        <label class="layui-badge-rim store-list-pay">￥${items.price}</label>
                                        <div class="store-list-colorbar">
                                             <span class="store-color-bar" style="position:relative;bottom:3px;border-color: #009688;color: #009688;border-width: 1px;border-style: solid;background-color: #fff;text-align: center;">商品号:${items.id}</span>
                                             <span class="store-color-bar" style="border-color: #5fb878;color: #5fb878;border-width: 1px;border-style: solid;background-color: #fff;    text-align: center;">${items.productName}</span>
                                        </div>
                                   </div>
                              </a>
                         </div>
                    </c:forEach>
               </div>
               <div style="margin: 50px 0 80px; text-align: center;"> </div>
          </div>
     </div>
</div>
<!-- 房间列表end -->



<!-- 中间区域结束 -->

<!-- 底部 -->
<div class="fly-footer">
     <p><a href="#">shop商城</a> 2020 © <a href="#">test.cn</a></p>
     <p>
          友情链接
          <a href="http://java.goodym.cn" target="_blank">java项目源码分享网</a>
          <a href="http://www.goodym.cn/code/list/all/1/20.html" target="_blank">源码下载平台</a>
          <a href="http://www.goodym.cn/market/list/all/1/20.html" target="_blank">源码市场</a>
          <a href="http://www.goodym.cn/resumetemplate/list/1/20.html" target="_blank">简历制作</a>
          <a href="http://www.goodym.cn/forum/list/0/1/20.html" target="_blank">社区论坛</a> </p>

</div>


<!-- 脚本开始 -->
<script src="${pageContext.request.contextPath}/statics/front/layui/dist/layui.js"></script>
<script src="${APP_PATH}/statics/echarts/jquery-3.1.1.min.js"></script>
<script>
    layui.use(["form","element","carousel"], function () {
        var form = layui.form,
            layer = layui.layer,
            element = layui.element,
            carousel = layui.carousel,
            $ = layui.$;

        //渲染轮播图
        carousel.render({
            elem: '#LAY-store-banner'
            ,width: '100%' //设置容器宽度
            ,height: '460' //设置容器高度
            ,arrow: 'always' //始终显示箭头
        });
    });
    window.onload=function(){
        //搜索
        $("button").click(
            function() {
                var name = $("#productNameId").val()
                console.log(name)
                location.href = "/items/goods/" + name;
            }
        )
    }
</script>
<!-- 脚本结束 -->
<ul class="layui-fixbar">
     <li class="layui-icon layui-fixbar-top" lay-type="top" style=""></li>
</ul>
<div class="layui-layer-move"></div>

</body>
</html>

